<template>
  <div>
    <el-card>
      <div class="box_main_accordion">
        <accordion v-for="task in tasks" :key="task.taskId">
          <accordionTitle class="TimelineTitle-first">
            <div class="TimelineTitle-first-lf">
              <i class="el-icon-star-on"></i>
              {{task.taskName}}
            </div>
            <div v-if="task.taskStatus===0">
              <el-button type="primary" size="small" @click="sendSms(task.phone)">短信催办</el-button>
            </div>
          </accordionTitle>
          <el-collapse-transition>
            <div class="TimelineItem-first">
              <div class="timeline-list">
                <div class="listFistSmall">审核结果:</div>
                <div class="listFistLr">{{task.taskStatus | mapLabel('taskStatus')}}</div>
              </div>
              <div v-if="task.comment && task.comment!=='null'" class="timeline-list">
                <div class="listFistSmall">审核意见:</div>
                <div class="listFistLr">{{task.comment}}</div>
              </div>
              <div class="timeline-list">
                <div class="listFistSmall">部门:</div>
                <div class="listFistLr">{{task.deptName}}</div>
              </div>
              <div v-if="task.nickName" class="timeline-list">
                <div class="listFistSmall">主要负责人:</div>
                <div class="listFistLr">{{task.nickName}}</div>
              </div>
              <div v-if="task.phone" class="timeline-list">
                <div class="listFistSmall">联系电话:</div>
                <div class="listFistLr">{{task.phone}}</div>
              </div>
              <div class="timeline-list" v-if="task.time">
                <div class="listFistSmall">审批时间:</div>
                <div class="listFistLr" >{{task.time |
                  parseTime('{y}-{m}-{d} {h}:{i}')}}
                </div>
              </div>
            </div>
          </el-collapse-transition>
        </accordion>
      </div>
    </el-card>
  </div>
</template>
<script>
import accordion from "./accordion/accordion.vue";
import accordionTitle from "./accordion/accordionTitle.vue";
import { sendUrge } from "@/api/approval"

export default {
  data() {
    return {};
  },
  props: ["tasks"],
  components: {
    accordion,
    accordionTitle
  },
  created() {
  },
  methods: {
    sendSms(phone){
      sendUrge(phone).then(res=>{
        this.$notify({
          title: "成功",
          message: "催办成功",
          type: "success",
          duration: 2000
        });
      })
    }
  },
};
</script>
<style scoped>
.TimelineItem-UL {
  padding-top: 10px;
  padding-bottom: 10px;
}

.TimelineTitle-first-lf {
  width: 50%;
  height: 22px;
  line-height: 22px;
  overflow: hidden;
  font-size: 16px;
  color: #409eff;
}

.TimelineItem-first-lcItme {
  border-radius: 3px;
  overflow: hidden;
  padding: 5px;
  margin-right: 7px;
  margin-bottom: 3px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 17px;
  color: #333;
}

.TimelineItem-first-lc ul {
  display: flex;
  flex-wrap: wrap;
}

.TimelineItem-first-lc {
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  width: 70%;
  margin-left: 2%;
  /* border: 1px solid red; */
}

.TimelineItem-first-lf-nl {
  display: flex;
  align-items: center;
  width: 30%;
}

.TimelineItem-first-lf {
  font-size: 15px;
  color: #409eff;
  text-align: left;
  padding-top: 7px;
  padding-bottom: 7px;
  display: flex;
  width: 90%;
}

.TimelineItem-first {
  width: 80%;
  margin-left: 40px;
}

.TimelineItem-first-lr {
  display: flex;
  align-items: center;
  min-width: 120px;
}

.TimelineItem_firtsItem {
  padding-top: 5px;
  padding-bottom: 4px;
  min-height: 50px;
  margin-left: 15px;
  width: calc(100% - 15px);
  /* border-bottom: 1px solid #ccc; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.TimelineItem_firtsItem:last-child {
  border-bottom: none;
}

.TimelineTitle-senoud {
  display: flex;
  justify-content: space-between;
  height: 45px;
  border-bottom: 1px solid #aaa;
}

.box_main_accordion .el-icon-arrow-down,
.box_main_accordion .el-icon-arrow-up {
  cursor: pointer;
  font-size: 20px;
  margin-left: 15px;
}

.TimelineTitle-first {
  display: flex;
  justify-content: space-between;
  color: #409eff;
  height: 45px;
  border-bottom: 2px solid #ccc;
}

.box_main_accordion .el-icon-star-on {
  color: #409eff;
  font-size: 15px;
}

.box_main_accordion {
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  padding-top: 5px;
  margin-left: 15px;
}
.timeline-list .listFistSmall {
  font-size: 15px;
  color: #333;
  width: 35%;
  text-align: right;
}
.timeline-list {
  height: 22px;
  display: flex;
  align-items: center;
  line-height: 22px;
  font-size: 15px;
  color: #909399;
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  align-items: center;
}

</style>